Table Colspan & Rowspan
The colspan and rowspan attributes are used to merge table cells. colspan merges cells horizontally (across columns) and rowspan merges cells vertically (across rows). They are essential for creating complex table layouts.
What are Colspan & Rowspan?
colspanmakes a cell span multiple columns.rowspanmakes a cell span multiple rows.- Both attributes accept a number indicating how many cells to merge.
- Used inside
<td>or<th>elements.
Why Use Colspan & Rowspan?
Complex Tables
Build advanced layouts with merged cells.
Headers
Use single header across multiple columns.
Clean Design
Reduce repetition with merged cells.
Reports
Financial and statistical tables often use merging.
Schedules
Show classes spanning multiple time slots.
Forms
Group related cells in a structured way.
Colspan & Rowspan Syntax
- Colspan:
<td colspan="2">Cell</td> - Rowspan:
<td rowspan="3">Cell</td> - Both: Use both on a single cell when needed.
- Values: Positive integers indicating number of cells to span.
- Default: Both default to
1(no merging).
Colspan & Rowspan Example
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th colspan="2">Student Marks</th>
</tr>
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan="2">Class 10</td>
<td>90</td>
</tr>
<tr>
<td>85</td>
</tr>
</table>
</body>
</html>
Code Explanation
| HTML Part | Meaning |
|---|---|
| colspan="2" | Makes a cell span 2 columns horizontally. |
| rowspan="2" | Makes a cell span 2 rows vertically. |
| <th> | Header cell — bold and centered by default. |
| border | Adds visible borders for clarity. |
Cell Merging Options
Use Cases
- Report headers: Single title across multiple columns.
- Time tables: Class spanning multiple periods.
- Result sheets: Group subjects under categories.
- Pricing tables: Merge cells for combined plans.
Practice Questions
- Create a 3x3 table with a header cell spanning all 3 columns.
- Make a cell that spans 2 rows in a 4-row table.
- Combine colspan and rowspan in a single cell.
- Build a class timetable with merged time slots.
Frequently Asked Questions
What is colspan?
An attribute that merges a cell across multiple columns horizontally.
What is rowspan?
An attribute that merges a cell across multiple rows vertically.
Can I use colspan and rowspan together?
Yes, a single cell can have both attributes.
What values are allowed?
Any positive integer indicating how many cells to span.
Conclusion
Colspan and rowspan are powerful tools for building complex HTML tables. Use them to merge cells, create clean headers and design clear layouts for reports, schedules and data dashboards.
Additional Tips
- Plan layout first: Sketch the table on paper.
- Don't overdo it: Too much merging hurts readability.
- Check accessibility: Add scope and headers when needed.
- Style with CSS: Use background colors to highlight merged cells.